import styles from './index.less';
import { Tabs, Button, Input } from 'antd';
import CommonFooter from '../../components/CommonFooter'

export default function ownspace() {
  const { TabPane } = Tabs;
  function callback(key: any) {
    console.log(key);
  }

  const Demo = () => (
    <Tabs defaultActiveKey="1" onChange={callback}>
      <TabPane tab="基本设置" key="1">
        <div className={styles.ant_card_body_img}>
          <span></span>
          <div>
            <span>用户名:</span> <input type="text" defaultValue='admin' />
          </div>
          <div>
            <span>邮箱:</span> <input type="text" className={styles.ant_card_body_inp} />
          </div>
        </div>
        <br />
        <Button type="primary">保存</Button>

      </TabPane>
      <TabPane tab="更新密码" key="2">
        <div className={styles.ant_card_body_pwd}>
          <div>
            <span className={styles.span}>原密码:</span> <Input.Password defaultValue='admin' />
          </div>
          <div>
            <span className={styles.span}>新密码:</span> <Input.Password />
          </div>
          <div>
            <span className={styles.span}>确认密码:</span> <Input.Password />
          </div>
          <br />
          <Button type="primary">更新</Button>
        </div>
      </TabPane>
    </Tabs>
  );
  return (
    <div>
      <div className={styles.ownspace}>
        <div className={styles.ant}>
          <ul className={styles.ant_list}>
            <li className={styles.ant_list_header}>系统概览</li>
            <li className={styles.ant_list_item}>累计发表了 24 篇文章</li>
            <li className={styles.ant_list_item}>累计创建了 7 个分类</li>
            <li className={styles.ant_list_item}>累计创建了 11 个标签</li>
            <li className={styles.ant_list_item}>累计上传了 115 个文件</li>
            <li className={styles.ant_list_item}>累计获得了 410 个评论</li>
          </ul>
        </div>
        <div className={styles.ant_card}>
          <div className={styles.ant_card_head}>
            个人资料
        </div>
          <div className={styles.ant_card_body}>
            <Demo />
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>

    </div>
  );
}
